<template>
  <div>
    <div
      style="padding-top: 20px"
      v-if="showSearch"
      :class="{
        'enter-level flipInX': showSearch,
      }"
    >
      <el-form :inline="true" :model="mallogsearch" class="demo-form-inline">
        <el-row justify="space-around" :gutter="25" style="margin-left:0px;margin-right:0px ">
          <el-col :span="5">
          <el-form-item label="日志编号">
          <el-input
            v-model="mallogsearch.id"
            placeholder="请输入日志编号"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
        <el-form-item label="主题">
          <el-input
            v-model="mallogsearch.subject"
            placeholder="请输入主题"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
        <el-form-item label="接收账号">
          <el-input
            v-model="mallogsearch.userId"
            placeholder="请输入接收账号"
            clearable
          />
        </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button type="primary" @click="getDataList" :icon="Search">
              搜索
            </el-button>
            <el-button type="info" @click="reset" :icon="Refresh">
              重置
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="5"></el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding: 30px">
      <div
        style="
          display: flex;
          justify-content: space-between;
        "
      >
        <div>
          <el-button
            :icon="Delete"
            type="danger"
            plain
            @click="removeLog"
            :disabled="isBatch"
            >删除</el-button
          >
          <el-button :icon="Scissor" type="danger" plain @click="clearData">
            清空</el-button>
          <el-button :icon="Bottom" type="warning" plain @click="open(null,2)">
            导出</el-button>
        </div>
        <div>
          <el-button
            :icon="Search"
            circle
            @click="showSearch = !showSearch"
          ></el-button>
          <el-button :icon="Refresh" circle @click="reset"></el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="dataList"
        style="width:100%"
        height="600"
        @selection-change="handleSelectionChange"
        v-loading="dataLoding"
        
      >
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column
          property="id"
          label="日志编号"
          width="105"
        />
        <el-table-column property="userId" label="接收账号"/>
        <el-table-column property="phone"  label="接收电话"/>
        <el-table-column property="sendMail" label="发送人邮箱" />
        <el-table-column property="receptionMail" label="接收邮箱" />
        <el-table-column label="发送时间" width="200">
          <template #default="scope">{{tool.formatDateToYYYYMMDD(scope.row.time)}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button @click="open(scope.row,1)" type="text" :icon="Bottom">
              导出
            </el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确定要删除该日志吗？"
              @confirm="oneremoveLog(scope.row)"
              @cancel="removeCnacle"
            >
              <template #reference>
                <el-button type="text" :icon="Delete"> 删除 </el-button>
              </template>
            </el-popconfirm>
            <el-button @click="getDetails(scope.row)" type="text" :icon="View">
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          :hide-on-single-page="false"
          background
          layout="prev, pager, next"
          :total="pages.total"
          :page-size="mallogsearch.pageSize"
          :page-count="pages.pages"
          @current-change="changePage"
          :pager-count="15"
        />
      </div>
    </div>
    <el-dialog
    v-model="dialogOverflowVisible"
    :title="logdetails.subject"
    width="700"
    draggable
    overflow
  >
    <el-row justify="space-around" :gutter="24">
      <el-col :span="24">
        <div style="text-indent:2em" v-html="logdetails.content"></div>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogOverflowVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import request from "@/assets/js/request";
import { ref, onMounted } from "vue";
import { ElMessage,ElMessageBox  } from "element-plus";
import tool from "@/assets/js/tool";
import {
  Search,
  Refresh,
  Delete,
  Scissor,
  Bottom,
  View
} from "@element-plus/icons-vue";


const mallogsearch=ref({
  id:null,
  subject:'',
  operName:'',
  userId:null,
  idlist:'',
  pageNum:1,
  pageSize:20
})
const dataList=ref([])
const pages=ref({
  total:0,
  pages:0
})

const showSearch = ref(true);
const dataLoding = ref(false);

// 记录当前批量删除tag的步骤
const selectable = ref();
const isBatch = ref(true);
const selectKey = ref([]);
//导出提示语
const msg=ref('确定导出所有日志数据？数据过大时可能较慢！')
//日志详情
const logdetails=ref({})
//详细显示参数
const dialogOverflowVisible = ref(false)

//详情
const getDetails=(data)=>{
  logdetails.value=data
  dialogOverflowVisible.value=true;
}

//导出请求
const fetchFile=()=>{
    request.post(`/maillog/exce`,mallogsearch.value,{responseType:'arraybuffer'}).then((response) => {
            const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '系统日志.xlsx';// 设置下载文件名
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
    })
    .catch(err =>{
      ElMessage.error(err.message);
       }
    )
}
//导出事件
const open = (data,key) => {
  if(key===2){
    getIdList(selectKey.value);}
  else{
    msg.value='确定导出该日志消息？'
    getId(data)}
  ElMessageBox.confirm(
    msg.value,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      fetchFile();
    }).catch(() => {
      msg.value='确定导出所有数据？'
      mallogsearch.value.idlist='';
      ElMessage({
        type: 'success',
        message: 'Canceled',
      })
    })
}
//确定idlist
const getIdList=(data)=>{
  if(data.length>0){
    msg.value='确定导出所选日志消息？'
    data.forEach(element => {
      mallogsearch.value.idlist=element+','+mallogsearch.value.idlist;
    });
  }
}
//单个idlist确定
const getId=(data)=>{
  mallogsearch.value.idlist=data.id;  
}
//获取数据
const getDataList=()=>{
  dataLoding.value = true;
  getIdList(selectKey.value);
  request.post('/maillog/page',mallogsearch.value).then((res) => {
    if(res.code===200){
        dataList.value=res.data.list;
        pages.value.total=res.data.total;
        pages.value.pages=res.data.pages;
      }else {
        ElMessage.error(res.msg);
      }
      dataLoding.value = false;
  }).catch(err =>{
    ElMessage.error(err.message);
     }
  )
  setTimeout(() => {
    dataLoding.value = false;
  }, 5000);
}
//换页
const changePage = (pageIndex) => {
  mallogsearch.value.pageNum = pageIndex;
  getDataList();
};
//删除请求
const removeRequest=()=>{
  request.post(`/maillog/del?idlist=`+mallogsearch.value.idlist).then((res) => {
    if(res.code===200){
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    }
    getDataList();
  }).catch(err =>{
    ElMessage.error(err.message);
     }
  )
  selectKey.value=[]
  msg.value='确定导出所有日志数据？数据过大时可能较慢！'

}
//批量删除事件
const removeLog=()=>{
  getIdList(selectKey.value)
  ElMessageBox.confirm(
    '确定删除所选项?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      removeRequest();
    }).catch(() => {
      selectKey.value=[]
      mallogsearch.value.idlist='';
    })
    
}
//单删确定
const oneremoveLog=(data)=>{
  mallogsearch.value.idlist=data.id;
  removeRequest();
  getDataList();
}
//单删取消
const removeCnacle=()=>{
  mallogsearch.value.idlist='';
}
//清空
const clearData=()=>{
  ElMessageBox.confirm(
    '确认要清空所有数据?危险！不可逆！',
    'error',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  ).then(() => {
      request.post('/maillog/clear').then((res) => {
        if(res.code===200){
          ElMessage({
            type: 'success',
            message: '数据已全部清空',
          })
          getDataList();
        }else{
          ElMessage.error(res.msg)
        }
      }).catch(err =>{ElMessage.error(err.message);}
      )
    }).catch(() => {}
  )
}
const reset = () => {
  mallogsearch.value={
    id:null,
    subject:'',
    operName:'',
    userId:null,
    idlist:'',
    pageNum:1,
    pageSize:20
  }
  getDataList(); 
};

// 多选
const handleSelectionChange = (val) => {
  let arr = val.map((item) => item.id);
  selectKey.value = arr;
  if (selectKey.value.length > 0) {
    isBatch.value = false;
  } else {
    isBatch.value = true;
  }
};

onMounted(() => {
  // getLogDataList();
  getDataList();
});
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-form {
  display: inline;
}

.activeTag {
  background: #fef0f0;
  border: #fde2e2 1px solid;
  color: #f67777;
}
.el-input {
    position: relative;
    display: inline-block;
    width: 220px;
}
</style>



